<template>
    <div>
        <Header v-if="showHeader" title="考核指标说明"></Header>
        <div class="template_content">
            <h2 class="template_title">{{templateLististData.name}}模板<span>（达标分 {{templateLististData.standard_score}}分）</span></h2>
            <ul class="template_list">
                <li class="template_item" v-for="(item,index) in templateLististData.targets" :key="index">
                    <h4><span>{{index+1}}</span>{{item.target_name}}</h4>
                    <p>{{item.target_remark}}</p>
                    <ul class="flex_list">
                        <li>满分：{{item.perfect_score}}</li>
                        <li>最高分：{{item.highest_score}}</li>
                        <li>权重：{{item.weight}}</li>
                        <li>{{item.target_value}}</li>
                    </ul>
                </li>
            </ul>
        </div>
        <Loading v-show = "showLoading"></Loading>
    </div>
</template>
<script>
import { templateTargets } from "@/request/api.js";
import Loading from "@/components/Loading.vue";
import Header from "@/components/Header.vue";
export default {
    name:'AppraisalIndexDescription',
    data(){
        return {
            showHeader:this.$store.state.showHeader,
            showLoading:true,
            templateId:'',
            templateLististData:{}
        }
    },
    components:{Loading,Header},
    mounted(){
        // console.log(this.$route.query)
        this.templateId = this.$route.query.id;
        // this.requestData = this.$route.query;
        // this.templateLististData = this.requestData.list[0].list
        templateTargets({token:this.$store.state.token,template_id:this.templateId}).then(res=>{
            // console.log(res.data);
            this.templateLististData = res.data.template;
            this.showLoading = false;
        }).catch(error=>{
            console.log(error);
            this.showLoading = false;
        })
    },
    methods:{}
}
</script>
<style lang="less" scoped>
.template_content{
    width: 100%;
    height: auto;
    padding: 0 15px 20px 15px;
    box-sizing: border-box;
    .template_title{
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        padding: 0 20px;
        box-sizing: border-box;
        text-align: center;
        color: #232426;
        span{
            margin-left: 20px;
            font-size: 13px;
            font-weight: normal;
            color: #ff661a;
        }
    }
    .template_list{
        width: 100%;
        height: auto;
        box-sizing: border-box;
        border-radius: 10px;
        background: #fff;
        padding: 0 20px 20px;
        .template_item{
            width: 100%;
            height: auto;
            border-bottom: 1px solid #ddd;
            padding: 10px 0;
            box-sizing: border-box;
            h4{
                line-height: 40px;
                font-size: 17px;
                font-weight: normal;
                span{
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    text-align: center;
                    line-height: 18px;
                    border-radius: 50px;
                    background: #fb0;
                    color: #fff;
                    margin-right: 5px;
                    font-size: 13px;
                    font-weight: normal;
                }
            }
            p{
                font-size: 14px;
                display: -webkit-box !important;
                overflow:hidden;
                word-break: break-all;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                padding-left: 25px;
                box-sizing: border-box;
                line-height: 26px;
                color: #979797;

            }
            .flex_list{
                width: 100%;
                height: 60px;
                line-height: 60px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #242426;
                padding-left: 25px;
                box-sizing: border-box;
            }
        }
        .template_item:last-child{
            border-bottom: none;
        }
    }
}


</style>